// 柱状图1模块
// 基于准备好的dom，初始化echarts实例

(function(){
    var myChart = echarts.init(document.getElementById('yujing'));

// 指定图表的配置项和数据
    let colorStopsArray = [
        [{
            offset: 0,
            color: 'rgba(136,255,23,0.8)', //  0%  处的颜色
        },
            {
                offset: 1,
                color: 'rgba(141,239,24,0.8)', //  100%  处的颜色
            },
        ],
        [{
            offset: 0,
            color: 'rgba(50,79,213,0.8)', //  0%  处的颜色
        },
            {
                offset: 1,
                color: 'rgba(44,23,245,0.8)', //  100%  处的颜色
            },
        ],
        [{
            offset: 0,
            color: 'rgba(255,76,192,0.8)', //  0%  处的颜色
        },
            {
                offset: 1,
                color: 'rgba(248,37,47,0.8)', //  100%  处的颜色
            },
        ],

    ];
    //生成随机数函数
    function getRandom(start, end, fixed=0) {
        let differ = end - start
        let random = Math.random()
        return (start + differ * random).toFixed(fixed)
    }
    let riskName = [ '低风险', '中级风险',  '高级风险'];
    let riskData = [getRandom(70,80), getRandom(177,201), getRandom(30,45),];

    option = {
        title: {
            //text: '个数(个)',
            x: '2%',
            y: '2%',
            textStyle: {
                color: '#2f89cf',
                fontSize: 14,
                fontWeight: 400,
            },
        },
        //color: ["#2f89cf"],
        //backgroundColor: '#fff',
        grid: {
            left: "0%",
            top: "10px",
            right: "0%",
            bottom: "4%",
            containLabel: true
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'none',
            },
            extraCssText: 'width:100px;height:60px;'
        },
        xAxis: {
            data: riskName,
            axisTick: {
                show: false,
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(45, 140, 240, 0.65)',
                    width: 1, //这里是为了突出显示加上的
                },
            },
            axisLabel: {
                show: true,
                interval: 0, //代表显示所有x轴标签显示
                rotate: 0, //代表逆时针旋转45度
                margin: 8,
                textStyle: {
                    color: '#1890FF',
                    fontSize: 14,
                    fontWeight: 400,
                },
            },
        },
        yAxis: [{
            splitNumber: 2,
            axisTick: {
                show: false,
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(24,144,255, 0.15)',
                    width: 1, //这里是为了突出显示加上的
                },
            },
            axisLabel: {
                inside: true,
                textStyle: {
                    color: '#1890FF',
                    fontWeight: 400,
                    fontSize: 14,
                },
            },
            splitArea: {
                show: false,
                areaStyle: {
                    color: 'rgba(255,255,255,.5)',
                },
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(24,144,255, 0.15)',
                    width: 1,
                    type: 'solid',
                },
            },
        },],
        series: [{
            name: '个数',
            type: 'pictorialBar',
            barCategoryGap: '-50%',
            symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
            label: {
                show: false,
                position: 'top',
                distance: 15,
                color: '#1890FF',
                fontWeight: 'bolder',
                fontSize: 14,
            },
            itemStyle: {
                normal: {
                    color: function (data) {
                        var obj = {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                colorStopsArray[data.dataIndex][0],
                                colorStopsArray[data.dataIndex][1],
                            ],
                            global: false, //  缺省为  false
                        }

                        return obj
                    },
                },
                emphasis: {
                    opacity: 1,
                },
            },
            data: riskData,
            z: 10,
        },],
    };


// 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
})();
//alert("hahahahaah")
/**(function () {

  // 实例化对象
  var myChart = echarts.init(document.querySelector(".bar .chart"));
  // 指定配置和数据
  var option = {
    color: ["#2f89cf"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    grid: {
      left: "0%",
      top: "10px",
      right: "0%",
      bottom: "4%",
      containLabel: true
    },
    xAxis: [
      {
        type: "category",
        data: [
          "旅游行业",
          "教育培训",
          "游戏行业",
          "医疗行业",
          "电商行业",
          "社交行业",
          "金融行业"
        ],
        axisTick: {
          alignWithLabel: true
        },
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: "12"
          }
        },
        axisLine: {
          show: false
        }
      }
    ],
    yAxis: [
      {
        type: "value",
        axisLabel: {
          textStyle: {
            color: "rgba(255,255,255,.6)",
            fontSize: "12"
          }
        },
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)"
            // width: 1,
            // type: "solid"
          }
        },
        splitLine: {
          lineStyle: {
            color: "rgba(255,255,255,.1)"
          }
        }
      }
    ],
    series: [
      {
        name: "直接访问",
        type: "bar",
        barWidth: "35%",
        data: arr,
        itemStyle: {
          barBorderRadius: 5
        }
      }
    ]
  };


  // 把配置给实例对象
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });

  // 数据变化
  var dataAll = [
    { year: "2019", data: [Math.random()*100, Math.random()*100, Math.random()*100, Math.random()*100, Math.random()*100, Math.random()*100, Math.random()*100]},
    { year: "2020", data: [300, 400, 350, 800, 1800, 1400, 700] }
  ];

  document.querySelector(".bar h2").addEventListener("click", function (e) {
    var i = e.target == this.children[0] ? 0 : 1;
    option.series[0].data = dataAll[i].data;
    myChart.setOption(option);
  });
})();
 */
// 折线图定制
(function () {
    //生成随机数函数
    function getRandom(start, end, fixed=0) {
        let differ = end - start
        let random = Math.random()
        return (start + differ * random).toFixed(fixed)
    }
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector(".line .chart"));

    // (1)准备数据
    var data = {
        year: [
            [getRandom(2.8,3.5),getRandom(3.5,4.5),getRandom(7.8,9.5),getRandom(12,14),getRandom(0.001,0.005),getRandom(0.005,0.02),getRandom(0.005,0.02),],
            [3.4,4.1,9.2,13.5, 0.003, 0.01, 0.01,]
        ]
    };

    // 2. 指定配置和数据
    var option = {
        color: ["#00f2f1", "#ed3f35"],
        tooltip: {
            // 通过坐标轴来触发
            trigger: "axis"
        },
        legend: {
            // 距离容器10%
            right: "10%",
            // 修饰图例文字的颜色
            textStyle: {
                color: "#4c9bfd"
            }
            // 如果series 里面设置了name，此时图例组件的data可以省略
            // data: ["邮件营销", "联盟广告"]
        },
        grid: {
            top: "20%",
            left: "3%",
            right: "4%",
            bottom: "3%",
            show: true,
            borderColor: "#012f4a",
            containLabel: true
        },

        xAxis: {
            type: "category",
            boundaryGap: false,
            data: [
                "cadmium",
                "chromium",
                "lead",
                "Sorbic-acid",
                "nitrite",
                "Mpn",
                "Cfu",




            ],
            // 去除刻度
            axisTick: {
                show: false
            },
            // 修饰刻度标签的颜色
            axisLabel: {
                color: "#4c9bfd"
            },
            // 去除x坐标轴的颜色
            axisLine: {
                show: false
            }
        },
        yAxis: {
            type: "value",
            // 去除刻度
            axisTick: {
                show: false
            },
            // 修饰刻度标签的颜色
            axisLabel: {
                color: "rgba(255,255,255,.7)"
            },
            // 修改y轴分割线的颜色
            splitLine: {
                lineStyle: {
                    color: "#012f4a"
                }
            }
        },
        series: [
            {
                name: "新增项目",
                type: "line",
                stack: "总量",
                // 是否让线条圆滑显示
                smooth: true,
                data: data.year[0]
            },
            {
                name: "新增技能",
                type: "line",
                stack: "总量",
                smooth: true,
                data: data.year[1]
            },
            /**{
        name: "直接访问",
        type: "bar",
        barWidth: "35%",
        data: data.year[1],
        itemStyle: {
          barBorderRadius: 5
        }
      }
             */
        ]
    };
    // 3. 把配置和数据给实例对象
    myChart.setOption(option);

    // 重新把配置好的新数据给实例对象
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
})();

// 饼形图定制
// 折线图定制
(function () {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector(".pie .chart"));
    function getRandom(start, end, fixed=0) {
        let differ = end - start
        let random = Math.random()
        return (start + differ * random).toFixed(fixed)
    }
    option = {
        tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)",
            position: function (p) {
                //其中p为当前鼠标的位置
                return [p[0] + 10, p[1] - 10];
            }
        },
        legend: {
            top: "90%",
            itemWidth: 10,
            itemHeight: 10,
            data: ["0岁以下", "20-29岁", "30-39岁", "40-49岁", "50岁以上"],
            textStyle: {
                color: "rgba(255,255,255,.5)",
                fontSize: "12"
            }
        },
        series: [
            {
                name: "风险等级饼状图",
                type: "pie",
                center: ["50%", "42%"],
                radius: ["40%", "60%"],
                color: [
                    "#06f0ab",
                    "#06c8ab",
                    "#065aab",
                    "#066eab",
                    "#0a0fab",
                    //"#0696ab",
                    //"#06a0ab",
                    //"#06b4ab",

                    "#dc50d7",

                    "#d23a6b"
                ],
                label: { show: false },
                labelLine: { show: false },
                data: [
                    { value: getRandom(2.8,3.0), name: "cadmium" },
                    { value: getRandom(3.0,3.5), name: "chromium" },
                    { value: getRandom(7.8,8.5), name: "lead" },
                    { value: getRandom(11,13), name: "Sorbic-acid" },
                    { value: getRandom(0.00,0.05), name: "nitrite" },
                    { value: getRandom(0.0,0.5), name: "Mpn" },
                    { value: getRandom(0,0.5), name: "Cfu" },


                ]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
})();
// 学习进度柱状图模块
(function () {
    //得到随机数
    function getRandom(start, end, fixed=0) {
        let differ = end - start
        let random = Math.random()
        return (start + differ * random).toFixed(fixed)
    }
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector(".bar1 .chart"));

    var data = [getRandom(80,100),getRandom(80,100),getRandom(80,90),getRandom(80,100)];
    var titlename = ["第一季度",
        "第二季度",
        "第三季度",
        "第四季度",
    ];
    //var valdata = ["精通", "熟练", "熟练", "掌握", "掌握"];
    var myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448"];
    option = {
        //图标位置
        grid: {
            top: "10%",
            left: "22%",
            bottom: "10%"
        },
        xAxis: {
            show: false
        },
        yAxis: [
            {
                show: true,
                data: titlename,
                inverse: true,
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: "#fff",

                    rich: {
                        lg: {
                            backgroundColor: "#339911",
                            color: "#fff",
                            borderRadius: 15,
                            // padding: 5,
                            align: "center",
                            width: 15,
                            height: 15
                        }
                    }
                }
            },
            {
                show: true,
                inverse: true,
                // data: valdata,
                axisLabel: {
                    textStyle: {
                        fontSize: 12,
                        color: "#fff"
                    }
                }
            }
        ],
        series: [
            {
                name: "条",
                type: "bar",
                yAxisIndex: 0,
                data: data,
                barCategoryGap: 50,
                barWidth: 10,
                itemStyle: {
                    normal: {
                        barBorderRadius: 20,
                        color: function (params) {
                            var num = myColor.length;
                            return myColor[params.dataIndex % num];
                        }
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: "inside",
                        formatter: "{c}%"
                    }
                }
            },
            {
                name: "框",
                type: "bar",
                yAxisIndex: 1,
                barCategoryGap: 50,
                data: [100, 100, 100, 100, 100],
                barWidth: 15,
                itemStyle: {
                    normal: {
                        color: "none",
                        borderColor: "#00c1de",
                        borderWidth: 3,
                        barBorderRadius: 15
                    }
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
})();
// 折线图 优秀作品
(function () {
    //得到随机数
    function getRandom(start, end, fixed=0) {
        let differ = end - start
        let random = Math.random()
        return (start + differ * random).toFixed(fixed)
    }
    var forecast=[];
    var truth=[];
    for(var i=0;i<100;i++){
        forecast[i]=Math.ceil(getRandom(0,5));
        truth[i]=Math.ceil(getRandom(0,5));

    }
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.querySelector(".line1 .chart"));

    option = {
        tooltip: {
            trigger: "axis",
            axisPointer: {
                lineStyle: {
                    color: "#dddc6b"
                }
            }
        },
        legend: {
            top: "0%",
            textStyle: {
                color: "rgba(255,255,255,.5)",
                fontSize: "12"
            }
        },
        grid: {
            left: "10",
            top: "30",
            right: "10",
            bottom: "10",
            containLabel: true
        },

        xAxis: [
            {
                type: "category",
                boundaryGap: false,
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 12
                    }
                },
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.2)"
                    }
                },

                data: [
                    "01", "02", "03", "04", "05", "06", "07", "08", "09", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23",
                    "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35","36","37","38","39","40","41","42","43","44","45","46","47",
                    "48","49","50","51","52","53","54","55","56","57","58","59","60","61","62","63","64","65","66","67","68","69","70","71","72","73",
                    "74","75","76","77","78","79","80","81","82","83","84","85","86","87","88","89","90","91","92","93","94","95","96","97","98","99","100"

                ]
            },
            {
                axisPointer: { show: false },
                axisLine: { show: false },
                position: "bottom",
                offset: 20
            }
        ],

        yAxis: [
            {
                type: "value",
                axisTick: { show: false },
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)"
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 12
                    }
                },

                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)"
                    }
                }
            }
        ],
        series: [
            {
                name: "流入",
                type: "line",
                smooth: true,
                symbol: "circle",
                symbolSize: 5,
                showSymbol: false,
                lineStyle: {
                    normal: {
                        color: "#0184d5",
                        width: 2
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "rgba(1, 132, 213, 0.4)"
                                },
                                {
                                    offset: 0.8,
                                    color: "rgba(1, 132, 213, 0.1)"
                                }
                            ],
                            false
                        ),
                        shadowColor: "rgba(0, 0, 0, 0.1)"
                    }
                },
                itemStyle: {
                    normal: {
                        color: "#0184d5",
                        borderColor: "rgba(221, 220, 107, .1)",
                        borderWidth: 12
                    }
                },
                data: forecast,
            },
            {
                name: "流出",
                type: "line",
                smooth: true,
                symbol: "circle",
                symbolSize: 5,
                showSymbol: false,
                lineStyle: {
                    normal: {
                        color: "#00d887",
                        width: 2
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: "rgba(0, 216, 135, 0.4)"
                                },
                                {
                                    offset: 0.8,
                                    color: "rgba(0, 216, 135, 0.1)"
                                }
                            ],
                            false
                        ),
                        shadowColor: "rgba(0, 0, 0, 0.1)"
                    }
                },
                itemStyle: {
                    normal: {
                        color: "#00d887",
                        borderColor: "rgba(221, 220, 107, .1)",
                        borderWidth: 12
                    }
                },
                data: truth,
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });
})();
// 点位分布统计模块
(function () {
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".pie1  .chart"));
    // 2. 指定配置项和数据
    var option = {
        legend: {
            top: "90%",
            itemWidth: 10,
            itemHeight: 10,
            textStyle: {
                color: "rgba(255,255,255,.5)",
                fontSize: "12"
            }
        },
        tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        // 注意颜色写的位置
        color: [
            "#006cff",
            "#60cda0",
            "#ed8884",
            "#ff9f7f",
            "#0096ff",
            "#9fe6b8",
            "#32c5e9",
            "#1d9dff"
        ],
        series: [
            {
                name: "点位统计",
                type: "pie",
                // 如果radius是百分比则必须加引号
                radius: ["10%", "70%"],
                center: ["50%", "42%"],
                roseType: "radius",
                data: [
                    { value: 20, name: "西安" },
                    { value: 26, name: "北京" },
                    { value: 24, name: "上海" },
                    { value: 25, name: "其他" },
                    { value: 20, name: "武汉" },
                    { value: 25, name: "杭州" },
                    { value: 30, name: "深圳" },
                    { value: 42, name: "广州" }
                ],
                // 修饰饼形图文字相关的样式 label对象
                label: {
                    fontSize: 10
                },
                // 修饰引导线样式
                labelLine: {
                    // 连接到图形的线长度
                    length: 10,
                    // 连接到文字的线长度
                    length2: 10
                }
            }
        ]
    };


    // 3. 配置项和数据给我们的实例化对象
    myChart.setOption(option);
    // 4. 当我们浏览器缩放的时候，图表也等比例缩放
    window.addEventListener("resize", function () {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
    });
})();